<style lang="scss">

</style>

<template>
  <div >
    <div>
      <el-button @click="insertTest">测试</el-button>
    </div>
    <div :id="id"></div>
  </div>
</template>

<script>
import { createEditor, Toolbar,
  historyForwardTool, historyBackTool,
    boldTool, italicTool,
  strikeThroughTool, underlineTool,
  colorTool,textBackgroundTool,
    colorFormatter,
    boldFormatter
} from '@textbus/editor'
import {
    Commander,
    Selection,
    FormatType,

} from '@textbus/core'


import { defineComponent, ContentType, useState, useSlots, Slot, VElement } from '@textbus/core'

export const myComponent = defineComponent({
  type: ContentType.BlockComponent, // 设置组件类型
  name: 'MyComponent',              // 组件的名字，不可重复
  // data 为组件的状态和插槽的数据
  setup(data) {
    // const slots = useSlots(data.slots)
    let state = data?.state ?? {}
    return {
      render(isOutputMode, slotRender) {
        return (
            VElement.createElement('span', {
              class: 'question'
            }, [
              VElement.createElement('span', null,
                  [`${state.name}：`]),
              // slotRender(slots.get(0), () => {
              //   return VElement.createElement('span', null, [])
              // })
            ])
        )
      }
    }
  }
})

const myComponentLoader = {
  // 匹配一个 DOM 元素是否为 myComponent
  match(element) {
    return element.tagName.toLowerCase() === 'my-component'
  },
  // 如果匹配成功，则调用 read 方法，我们可以在这里创建组件的实例并返回
  read(element, injector) {
    return myComponent.createInstance(injector)
  },
  // 把组件和加载器绑定在一起
  component: myComponent
}





export default {
  data() {
    return {
      editor: null,
      id: ZY.rid()
    }
  },
  methods: {
    insertTest() {
      const injector = this.editor.injector

      // 获取 Textbus Commander 实例
      const commander = injector.get(Commander)
      // const selection = injector.get(Selection)
      // console.log(commander)

      // const slot = new Slot([ContentType.Text])
      const componentInstance = myComponent.createInstance(injector, {
        // 组件插槽的集合
        // slots: [slot],
        state: {
          name: '问',
          age: 34
        }
      })

      // this.editor.focus()
      // commander.enter()
      this.editor.focus()
      // commander.insert(componentInstance)
      // this.editor.focus()
      // console.log(selection)
      // selection.toPrevious()
      commander.insert('问：sdsdsds', [
        [colorFormatter, 'red'],
      ])
    },
  },
  mounted() {

    let editor = createEditor(document.getElementById(this.id), {
      componentLoaders: [
        myComponentLoader,
      ],
      plugins: [
          new Toolbar([
            [historyBackTool, historyForwardTool], // 历史记录后退、历史记录前进

            [boldTool, italicTool, strikeThroughTool, underlineTool], // 加精、斜体、中划线、下划线


            [colorTool, textBackgroundTool], // 文字颜色、文字背景颜色
          ])
      ],
      content: ''
    })

// 监听数据变化，并获取编辑结果
    editor.onChange.subscribe(() => {
      const contents = editor.getContents()
    })

    this.editor = editor
  }
}
</script>
